<!doctype html>
<html>
    <head>
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;
                flex-flow: column;
            }
            buttons {
                justify-content: space-around;
            }
        </style>
    </head>
    <body>
        <div id="buttons" >
            <input value ="getDisplayMedia" onclick="getDisplayMedia(true, true);" type="button">
            <input value = "chooseDesktopMedia" onclick="chooseDesktopMedia();" type="button">
            <input value ="Stop" onclick="stop();" type="button">
        </div>
        <div id="content"></div>
    </body>
    <script>
        const EXTENSION_ID = "nkeimhogjdpnpccoofpliimaahmaaome"; // hangout services extension
        const content = document.getElementById("content");
        const video = document.createElement("video");
        video.setAttribute("width", 640);
        video.setAttribute("height", 640);
        video.setAttribute("style", "background-color: black;");
        content.appendChild(video);

        async function getDisplayMedia(v = true, a = true) {
            stop();
            navigator.mediaDevices.getDisplayMedia({ video: v, audio: a })
            .then(stream => {
                start(stream);
            }, error => {
            console.error(error);
            });
        }

        function chooseDesktopMedia() {
            stop();
            // Connect to the 'chooseDesktopMedia' listener within the hangout services extension.
            let port = chrome.runtime.connect(EXTENSION_ID, {name: "chooseDesktopMedia"})

            // The 'chooseDesktopMedia' api returns a streamId that
            // identifies a media source in the constraints of 'getUserMedia'
            // (see chromeMediaSourceId)
            port.onMessage.addListener(result => {
                navigator.mediaDevices.getUserMedia({
                    video: {
                        mandatory: {
                            chromeMediaSource: "desktop",
                            chromeMediaSourceId: result.value.streamId
                        },
                    }
                }).then(stream => {
                    start(stream);
                }, error => {
                    console.error(error);
                })
            })

            // Trigger the listener on the other side,
            // we should see the picker dialog after this call.
            port.postMessage({method: "chooseDesktopMedia"})
        }

        function stop() {
            if (video.srcObject)
                for (const track of video.srcObject.getTracks())
                    track.stop()
            video.srcObject = null;
            video.setAttribute("style", "background-color: black;");
        }

        function start(stream) {
            video.srcObject = stream;
            video.play();
        }

    </script>
</html>
